<!DOCTYPE html>
<title>Test that cues are being matched properly by the lang attribute and :lang() pseudo class.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
::cue(:lang(ru)) { color: lime; }
::cue(lang[lang="en"]) { color: purple; }
::cue(c[lang="ru"]) { color: red; } /* Shouldn't work, no attribute 'lang' for 'c'. */
</style>
<video></video>
<script>
async_test(function(t) {
    var video = document.querySelector('video');
    video.src = '../content/test.ogv';

    var track = document.createElement('track');
    track.src = 'captions-webvtt/styling-lang.vtt';
    track.kind = 'captions';
    track.default = true;
    video.appendChild(track);

    video.onseeked = t.step_func_done(function() {
        var cueNode = textTrackCueElementByIndex(video, 0).firstChild.firstElementChild.firstElementChild;
        assert_equals(getComputedStyle(cueNode).color, 'rgb(128, 0, 128)');
        cueNode = cueNode.firstElementChild.firstElementChild;
        assert_equals(getComputedStyle(cueNode).color, 'rgb(0, 255, 0)');
        cueNode = cueNode.firstElementChild.firstElementChild;
        assert_equals(getComputedStyle(cueNode).color, 'rgb(128, 0, 128)');
    });

    video.currentTime = 0.1;
});
</script>